<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
  <script>
    /*
      1.初始化阶段：由ReactDOM.render()触发 --- 初次渲染
        1.constructor()
        2.componentWillMount()
        3.render()
        4.componentDidMount() ===> 常用
          一般在这个钩子中做一些初始化的事，例如：开启定时器、发送忘了请求、订阅消息
      2.更新阶段：由组件内部this.setState()或父组件render触发
        1.shouldComponentUpdate()
        2.componentWillUpdate()
        3.render() ===> 必须使用的一个
        4.componentDidUpdate()
      3.卸载组件：由ReactDOM.unmountComponentAtNode()触发
        1.componentWillUnmount() ===> 常用
          一般在这个钩子中做一些收尾的事。例如：关闭定时器、取消订阅消息
    */

    // 创建组件
    class Count extends React.Component {

      // 构造器
      constructor (props) {
        console.log('Count --- constructor')
        super(props)
        // 初始化状态
        this.state = { count: 0 }
      }
      
      // 加1按钮的回调
      add = () => {
        // 获取原状态
        const { count } = this.state
        // 更新状态
        this.setState({count: count+1})
      }

      // 卸载组件按钮的回调
      death = () => {
        ReactDOM.unmountComponentAtNode(document.getElementById('root'))
      }

      // 强制更新按钮的回调
      force = () => {
        this.forceUpdate()
      }

      // 组件将要挂载的钩子
      componentWillMount () {
        console.log('Count---componentWillMount')
      }

      // 组件挂载完毕的钩子
      componentDidMount () {
        console.log('Count---componentDidMount')
      }

      // 组件将要卸载的钩子
      componentWillUnMount () {
        console.log('Count---componentWillUnmount')
      }

      // 控制组件更新的“阀门”
      shouldComponentUpdate () {
        console.log('Count---shouldComponentUodate')
        return true // 默认返回true
      }

      // 组件将要更新的钩子
      componentWillUpdate () {
        console.log('Count---componentWillUpdate')
      }

      // 组件更新完毕的钩子
      componentDidUpdate () {
        console.log('Count---componentDidUpdate')
      }

    }
  </script>
</body>
</html>